<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="calendarInfo" :label-position="alignment">
				<uni-forms-item label="开始时间" name="startTime" required>
					<uni-datetime-picker type="datetime" v-model="calendarInfo.startTime" />
				</uni-forms-item>
				<uni-forms-item label="结束时间" name="endTime">
					<uni-datetime-picker type="datetime" v-model="calendarInfo.endTime" />
				</uni-forms-item>
				<uni-forms-item label="类型" name="type">
					<uni-data-select v-model="calendarInfo.type" :localdata="typeOptions" placeholder="请选择类型" />
				</uni-forms-item>
				<uni-forms-item label="地点" name="place">
					<uni-easyinput v-model="calendarInfo.place" placeholder="请输入地点" />
				</uni-forms-item>
				<uni-forms-item label="内容" name="content" required>
					<uni-easyinput type="textarea" v-model="calendarInfo.content" placeholder="请输入内容" />
				</uni-forms-item>
				<uni-forms-item label="优先级" name="priority">
					<uni-rate v-model="calendarInfo.priority" max="3" @change="onPriorityChange" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remark">
					<uni-easyinput v-model="calendarInfo.remark" placeholder="请输入备注" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit(calendarInfo)">提交</button>
			<button v-if="isEdit" type="warn" @click="deleteCalendar(calendarInfo.calendarId)"
				style="margin-top: 10px;">删除</button>
		</view>
	</view>
</template>

<script>
	import {
		addCalendarInfo,
		getCalendarInfo,
		updateCalendarInfo,
		deleteCalendarInfo
	} from "@/api/todo/calendar/calendar.js";

	export default {
		data() {
			return {
				// 表单排列方式
				alignment: 'top',
				// 类型下拉选
				typeOptions: [{
						value: '0',
						text: '日常生活'
					},
					{
						value: '1',
						text: '工作学习'
					},
					{
						value: '2',
						text: '休闲娱乐'
					},
				],
				// 字段初始值
				calendarInfo: {
					startTime: '',
					endTime: '',
					type: '',
					place: '',
					content: '',
					priority: '',
					remark: ''
				},
				// 用于区分是新增还是编辑
				isEdit: false,
				// 校验规则
				rules: {
					startTime: {
						rules: [{
							required: true,
							errorMessage: '开始时间不能为空'
						}]
					},
					content: {
						rules: [{
							required: true,
							errorMessage: '内容不能为空'
						}]
					},
				},
			}
		},
		onLoad(option) {
			// 判断是新增还是编辑
			if (typeof option.calendarId != 'undefined') {
				this.isEdit = true;
				// 动态修改标题
				uni.setNavigationBarTitle({
					title: '编辑日程'
				});
				// 查详情
				getCalendarInfo(option.calendarId).then(response => {
					if (response.code === 200) {
						this.calendarInfo = response.data;
					} else {
						this.$modal.msgError(response.msg);
					}
				});
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			// 优先级监听事件
			onPriorityChange(e) {
				console.log('rate发生改变:' + JSON.stringify(e))
			},
			// 提交方法
			submit(ref) {
				this.$refs.form.validate().then(res => {
					if (!this.isEdit) {
						// 新增
						this.calendarInfo.state = '0'; // 新增默认日程未开始
						console.log(this.calendarInfo.startTime,1111111111);
						console.log(this.calendarInfo.endTime,2222222222)
						addCalendarInfo(this.calendarInfo).then(response => {
							if (response.code === 200) {
								this.$modal.msgSuccess(response.msg);
								setTimeout(() => {
									this.goBack();
								}, 1000); // 需要等一会才有弹窗效果
							} else {
								this.$modal.msgError(response.msg);
							}
						})
					} else {
						// 编辑
						updateCalendarInfo(this.calendarInfo).then(response => {
							if (response.code === 200) {
								this.$modal.msgSuccess(response.msg);
								setTimeout(() => {
									this.goBack();
								}, 1000); // 需要等一会才有弹窗效果
							} else {
								this.$modal.msgError(response.msg);
							}
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 删除日程
			deleteCalendar(calendarId) {
				deleteCalendarInfo(calendarId).then(response => {
					if (response.code === 200) {
						this.$modal.msgSuccess(response.msg);
						setTimeout(() => {
							this.goBack();
						}, 1000); // 需要等一会才有弹窗效果
					} else {
						this.$modal.msgError(response.msg);
					}
				})
			},
			// 返回上一页并刷新页面
			goBack() {
				uni.navigateBack({
					delta: 1 //返回页数
				});
			}
		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}
</style>